<template>
  <div class="home">
    <!-- 视图区 -->
    <div class='main'>
      <router-view/>
    </div>
    <!-- 导航区 -->
    <div class='nav'>
      <router-link to="/index">Home</router-link>
      <router-link to="/Notification">Notification</router-link>
      <router-link to="/Account">Account</router-link>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>
<style lang="scss" scoped>
.home{
  height: 100%;
  display: flex;
  flex-direction: column;
  .main{
    flex: 1;
    overflow: auto;
  }
  .nav{
    width: 100%;
    height: 50px;
    background: #ccc;
    display: flex;
    a{
      flex: 1;
      line-height: 50px;
      text-align: center;
      text-decoration: none;
      color: #333;
    }
    .router-link-exact-active,.router-link-active{
      background-color: red;
    }
  }
}
</style>
